<template>
    <el-card style="height:900px;margin-top:5px">
        <span style="color: #4d62a5;font-size: 20px;font-weight:900;">权 限 定 义</span>
        <el-divider style="margin-top:5px;" />
        <el-row>
            <el-col :span="18"></el-col>
            <el-col :span="6">
                <el-row :gutter="5">
                    <el-col :span="6">
                        <el-select v-model="value">
                            <el-option label="全部" value="all" />
                            <el-option label="有" value="true" />
                            <el-option label="无" value="false" />
                        </el-select>
                    </el-col>
                    <el-col :span="12">
                        <el-input v-model="input" class="w-50 m-2" placeholder="请输入角色名称搜索" :suffix-icon="Search" />
                    </el-col>
                    <el-col :span="6">
                        <el-button style="float: right;background-color: #8FAADC;color: white;" @click="addrole">新建角色
                        </el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%;margin-top: 20px;" border="true"
            :header-cell-style="{ background: '#b4c7e7', color: 'black', fontSize: '12px', fontWeight: '500' }">
            <el-table-column prop="role_name" label="角色名称" align="center" />
            <el-table-column prop="role_text" label="角色描述" align="center" />
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <el-switch @change="switchBtn(scope.row)" v-model="scope.row.status" :active-value=1
                        :inactive-value=2 />
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间 " align="center" />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="text" class='btn' @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" style="color:green" class='btn' @click="handleDell(scope.row)">权限配置
                    </el-button>
                    <el-button type="text" style="color:orange" class='btn' @click="deleteBtn(scope.row.role_id)">删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
    </el-card>
    <!-- 新建角色 -->
    <el-dialog v-model="dialogVisible" title="新 建 角 色" width="20%" top="320px">
        <el-divider style="margin-top:-30px" />
        <el-form :model="addform">
            <el-form-item label="角色名称">
                <el-input v-model="addform.role_name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="addform.role_text" type="textarea" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch style="margin-left:30px" v-model="addform.status" @change="switchBtn(addform.statu)"
                    :active-value=1 :inactive-value=2 />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-divider />
            <span class="dialog-footer">
                <el-button style="color:white;background-color: #CCCCCC;" @click="addCancel()">取消</el-button>
                <el-button style="background-color: #8FAADC;color: white;" @click="addClick()">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑角色 -->
    <el-dialog v-model="editVisible" title="编 辑 角 色" width="20%" top="320px">
        <el-divider style="margin-top:-30px" />
        <el-form :model="role_row">
            <el-form-item label="角色名称">
                <el-input v-model="role_row.role_name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="role_row.role_text" type="textarea" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch style="margin-left:30px" v-model="role_row.status" @change="switchBtn(role_row.status)"
                    :active-value=1 :inactive-value=2 />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-divider />
            <span class="dialog-footer">
                <el-button style="color:white;background-color: #CCCCCC;" @click="editVisible = false">取消</el-button>
                <el-button style="background-color: #8FAADC;color: white;" @click="editRole()">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 分配权限 -->
    <el-dialog v-model="authvisiable" title="权 限 配 置  设备管理员" width="20%" top="320px">
        <el-divider style="margin-top:-30px" />
        <!-- <el-checkbox v-model="checkall" label="全选" size="large" /> -->
        <div class="title">
            <!-- <el-checkbox v-model="checked" @change="checkedAll">全选/反选 </el-checkbox>
            <el-checkbox v-model="checked2" @change="expandAll">展开全部</el-checkbox> -->
        </div>
        <el-tree :data="AuthTrue" show-checkbox node-key="auth_id" :props="defaultProps" ref="treeRef"></el-tree>
        <template #footer>
            <el-divider />
            <span class="dialog-footer">
                <el-button style="color:white;background-color: #CCCCCC;" @click="authvisiable = false">取消</el-button>
                <el-button style="background-color: #8FAADC;color: white;" @click="allotAuth()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { addRole, deleteRole, getAuthList, RoleList, switchStatus, editAuth } from '../../../api/model/power';
import { ElMessage, ElMessageBox } from 'element-plus'

var value = ref('all')
var input = ref('')
var dialogVisible = ref(false)
var editVisible = ref(false)
var authvisiable = ref(false)
// var checkall = ref(false)
var AuthTrue = ref([])
var addform = reactive({
    role_name: '',
    role_text: '',
    status: true
})
// 树形控件
var defaultProps = ref({
    children: "son",
    label: "auth_name"
}) //格式绑定

// 修改时角色信息
var role_row = ref()
// table数据
var tableData = ref()
// 树形tableRef
const treeRef = ref()

// 保存分配权限
const allotAuth = async () => {
    authvisiable.value = false
    let datas = treeRef.value.getCheckedNodes(false, false)
    let ids = []
    let len = datas.length

    for (var i = 0; i < len; i++) {
        console.log(datas[i].auth_id);
        ids.push(datas[i].auth_id)
    }

    await editAuth({ ...role_row.value, auth_id: ids.toString() })
    getRoleList()
}

// 角色修改
const editRole = async () => {
    editVisible.value = false
    await editAuth({ ...role_row.value })
    getRoleList()
}
// 新增取消按钮
const addCancel = () => {
    dialogVisible.value = false
    addform.role_name = '',
        addform.role_text = '',
        addform.status = true
}
// 切换状态
const switchBtn = async (e) => {
    let target = e
    target.status = e.status === 1 ? 1 : 2
    await switchStatus(target)
    getRoleList()
}
// 删除角色
const deleteRoles = async (id) => {
    await deleteRole({ "role_id": id })
    getRoleList()
}


// 监听修改
// const checkChange = () => {
// console.log(treeRef.value.getCheckedNodes(false, false))
// },



// 删除提示框
const deleteBtn = (id) => {
    ElMessageBox.confirm(
        '是否删除该角色?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // ElMessage({
            //     type: 'success',
            //     message: '删除成功',
            // })
            deleteRoles(id)

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

function addrole() {
    dialogVisible.value = true
}
// 修改按钮框
function handleEdit(e) {
    role_row.value = e
    editVisible.value = true
}
// 分配权限框按钮
function handleDell(e) {

    let t = setInterval(() => {
        authvisiable.value = true
        role_row.value = e
        console.log(e.auth_id);

        if (e.auth_id) {
            let arr = e.auth_id.split(',')
            console.log(arr, 'arr');
            treeRef.value.setCheckedKeys(arr, false)
        } else {
            console.log("auth_id is null");
            treeRef.value.setCheckedKeys([], false)
        }
        clearInterval(t)
    }, 100)
}

//添加按钮
const addClick = async () => {
    dialogVisible.value = false
    await addRole(addform)
    addform.role_name = '',
        addform.role_text = '',
        addform.status = true
    getRoleList()
}

// 获取接口数据
const getRoleList = async () => {
    let res = await RoleList()
    tableData.value = res.data.data
}
// 获取权限树
const getAuthLists = async () => {
    let res = await getAuthList()
    AuthTrue.value = res.data

}
onMounted(() => {
    getRoleList()
    getAuthLists()
})
</script>

<style lang="less">
span.el-dialog__title {
    color: #4D62A5;
}

.el-dialog__footer {
    margin-top: -60px
}
</style>
